
/*****************************************************************
** add-role.css **************************************************
*****************************************************************/
@import "manage-comment.scss";

$mainColor:#23a8f5;

.right-box{
    padding-left:0;
    padding-right:0;
}
.content{
    width:100%; 
    min-height:800px;
    padding-left:15px; 
    padding-top:15px; 
    box-sizing:border-box;
}

.container-full{
    width:100%; 
    padding:20px; 
    background-color:#fff;
}

.container-full .header{
    width:100%;
    margin-top:10px;
    margin-right:0;
    margin-left:0;
    color:#333;
    
    div{
        padding-left:0;
        padding-right:0;
    }
    
    .role-permission{margin-top:30px}
    
    input{
        width:330px;
        height:43px;
        outline:0;
        border-radius:4px;
        border:1px solid #999;
        padding-left:10px;
        padding-right:10px;
        box-sizing:border-box;
        &:focus{
            border-radius:4px;
            border:1px solid $mainColor;
            box-shadow:0 0 3px $mainColor;
            outline:0;
        }
    }

}

.pro-manage,.role-manage{color:#4d4d4d;}

.handing{
   height:40px;
   line-height:40px; 
   margin-top:20px;
}

.manage{padding:8px;}

.manage-bd{
    width:100%;
    background-color:#f5f8f9;
    margin-left:0;
    margin-right:0;
}

.manage-item{
    margin-top:20px;
    margin-bottom:20px;
    border-radius:4px;
    background-color:#f5f8f9;
    border:1px solid #f5f8f9;
    
//  &:hover{border:1px solid $mainColor;}
}

.item-title{
    font-size:21px;
    letter-spacing: 1px;
    padding-top:8px;
    padding-bottom:8px;
    input[type="checkbox"]{
        padding:0;
        cursor:pointer;
        z-index:99;
        position:relative;
        left:10px;;
        opacity: 0;
    }
    
    input[type="checkbox"]+i{
        display:inline-block;
        width:24px;
        height:24px;
        border-radius:50%;
        border:1px solid #4d4d4d;
        box-sizing:border-box;
        position:relative;
        top:5px;
        left:-8px;
    }
    
    input[type="checkbox"]:checked+i{
        background-color:#b6e0f8;
        border-color:#b6e0f8;
    }
    
    input[type="checkbox"]:checked+i:after{
        display:block;
        content:"";
        position:absolute;
        top:2px;
        left:6px;
        width:9px;
        height:14px;
        transform: rotate(45deg);
        background-color:transparent;
        border-right:3px solid $mainColor;
        border-bottom:3px solid $mainColor;
    }
}

.item-bd{
    margin:0 auto;  
    width:106px; 
    position:relative;
    line-height:36px;
}

.item-bd,.handing{
    input[type="checkbox"]{
        margin-right:8px;
        padding:0;
        z-index:99;
        position:relative;
        opacity: 0;
        cursor:pointer;
    }
    
    input[type="checkbox"]+i{
        display:inline-block;
        width:14px;
        height:14px;
        border-radius:50%;
        border:1px solid #4d4d4d;
        box-sizing:border-box;
        position:absolute;
        left:0;
        margin-top:11px;
    }
    
    input[type="checkbox"]:checked+i{
        border-width:4px;
        border-color:$mainColor;
    }
}

.handing{
    position:relative;
    
    input[type="checkbox"]+i{
        position:absolute;
        left:0;
        top:2px;
    }
}

.button-group{
    margin-top:35px;
    margin-bottom:35px;
    
    .btn{
        height:60px;
        border-radius:4px;
        line-height:60px;
        margin-right:20px;
        font-size:21px;
        padding:0;
        &:hover{opacity: .8;}
    }
    
    .btn-cancel{
        width:160px;
    }
    
    .btn-confirm{
        width:200px;
        background-color:$mainColor;
        color:#fff;
    }
    
}

/**********************************************************************
 * invite-role.css ****************************************************
***********************************************************************/
.inviteRole{min-width:480px;}

.header-cell{
    //width:50%;
    position:relative;
    span{
        display:inline-block;
        width:90px;
    }
}


.icon-youxiang-copy,.icon-control-arr-copy-copy{
    position:absolute;
    left:380px;
    font-size:26px;
    top:13px;
}

.icon-control-arr-copy-copy{
    color:#999;
}

.icon-youxiang-copy{
    color:$mainColor;
}

.container-full .select-role{
    position:relative;
    .options-menu{
        position:absolute;
        display:none;
        width:330px;
        max-height:250px;
        top:47px;
        left:94px;
        background-color:#fff;
        border:1px solid $mainColor;
        box-shadow:0 0 5px $mainColor;
        border-radius:4px;
        box-sizing:border-box;
        z-index:99;
    }
    
    ul.options-items{
        list-style-type: none;
        margin:0;
        padding:0;
        max-height: 250px;
        overflow:auto;
        overflow-x:hidden;
        z-index:100;
    }
    
    li.options{
        width:330px;
        height:38px;
        line-height:38px;
        cursor:pointer;
        text-align:left;
        padding-left:20px;
        box-sizing:border-box;
        
        &:hover{background-color:$mainColor; color:#fff;}
    }
    
}



